



        body{
            overflow: hidden;
        }
        body.mobileDevice{
            overflow-y: auto;
        }
        footer{
            position: fixed;
        }
        header .menuBtn, header .logo{
            position: fixed;
        }

        .fltImg{
            position: absolute;
            overflow: hidden;
            cursor: pointer;
        }
        .fltImg::before,
        .fltImg::after{
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            opacity: 0;
            transition: .5s;
        }
        .fltImg::before{
            width: calc(100% - 100px);
            height: calc(100% - 100px);
            background: rgba(29,30,44,0.7);
        }
        .fltImg:hover::before{
            opacity: 1;
            width: calc(100% - 50px);
            height: calc(100% - 50px);
        }
        .fltImg:hover::after{
            width: 20px;
            height: 20px;
            border: 3px solid #fff;
            border-radius: 50%;
        }
        .fltImg:hover::after{
            opacity: 1;
        }
        .fltImg.frozen{
            transition: max-width 2s 0s cubic-bezier(0, 1, 0.3, 1),margin 2s 0s cubic-bezier(0, 1, 0.3, 1);
        }

        .scroll{
            transition: .5s opacity;
        }
        .scroll.disappear{
            opacity: 0;
        }

        main>*{
            position: relative;
            z-index: 2;
        }
        .projects{
            position: absolute;
            top: 0px;
            left: 0px;
        }
        .projects .contn nav,
        .projects .contn .swiper{
            opacity: 1;
            transform: translateY(0px);
        }
        main .banner{
            pointer-events: all;
            height:100vh;
            position: relative;
        }
        main .banner.disappear{
            pointer-events: none;
        }
        main .banner .inner{
            height:100%;
            margin: 0 auto;
            position: relative;
            transition-property: padding,width,height,top,opacity;
            transition-duration: .7s,.7s,.7s,.7s,.3s;
            transition-delay: .3s,.3s,.3s,.3s,0s;
            transition-timing-function: ease;
            width: 100%;
        }
        main .banner.disappear .inner{
            padding: 0px 25px;
            opacity: 0;
            width: calc(50% - 25px);
            height: 450px;
            transition-delay: 0s,0s,0s,0s,.7s;
        }
        main .banner .pic{
            height: 100%;
            background: #1d1e2c;
        }
        main .banner .pic img{
            opacity: .6;
        }
       
        main .banner .ttls{
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            z-index: 3;
        }
        main .banner .ttls.disappear{
            transition: opacity .5s;
            opacity: 0;
        }
        main .banner .ttls::before{
            content: '';
            position: absolute;
            display: block;
            top: 25px;
            left: 50%;
            transform: translateX(-50%);
            width: calc(100% - 55px);
            height: calc(100% - 90px);
            border: 5px solid #fff;
            z-index: 3;
            pointer-events: none;
            opacity: 0;
            transition: 1s opacity;
        }
        main .banner.frozen .ttls::before{
            opacity: 1;
        }
        main .banner .ttls .box{
            position: absolute;
            height: 195px;
            left: 350px;
            top: 50%;
            transform: translateY(-50%);
            color: #fff;
        }
        main .banner .ttls .box .no{
            font-size: 195px;
            font-weight: 100;
            overflow: hidden;
            position: absolute;
            line-height: 1;
            width: 260px;
            transition:  ease .6s clip-path;
            clip-path: polygon(100% 0%,100% 0%,100% 100%,100% 100%);
        }
        main .banner.frozen .ttls .box .no{
            clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
        }
        main .banner .ttls .box .no p{
            width: 260px;
            text-align: right;
        }
        @keyframes showNoP{
            0%{
                margin-left:-260px;
            }100%{
                margin-left:0;
            }
        }
        main .banner .ttls .box .desc{
            font-weight: 700;
            font-size: 70px;
            letter-spacing: 15px;
            text-transform: uppercase;
            position: absolute;
            left: 295px;
            top: 100px;
            overflow: hidden;
            transition:  ease .6s clip-path;
            clip-path: polygon(0% 0%,0% 0%,0% 100%,0% 100%);
        }
        main .banner.frozen .ttls .box .desc{
            clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
        }
        main .banner .ttls .box .desc p{
            width: 660px;
            line-height: 1;
        }
        main .banner .ttls .box::before{
            content: '';
            position: absolute;
            top: 80px;
            left: 295px;
            height: 5px;
            background: #fff;
            transition: all .3s ease;
            opacity: 0;
            width: 0;
        }
        main .banner.frozen .ttls .box::before{
            width: 75px;
            opacity: 1;
        }
        main .banner .ttls .box>span{
            font-size: 16px;
            text-transform: uppercase;
            font-weight: 700;
            letter-spacing: 3px;
            opacity: 0;
            transition: all .7s ease .3s;
            position: absolute;
            left: 295px;
            bottom: -75px;
            white-space: nowrap;
            
        }
        main .banner.frozen .ttls .box>span{
            opacity: 1; 
        }
        main .banner .scrl{
            opacity: 0;
            bottom: 80px;
            white-space: nowrap;
            font-weight: bold;
            font-size: 14px;
            color: #fff;
            z-index: 5;
            transition: .5s opacity;
        }
        main .banner.frozen .scrl{
            opacity: 1;
        }
        main .banner.frozen .scrl img{
            margin: 0 auto;
            width: 8px;
            display: block;
            margin-top: 7px;
        }

        main .content{
            border: 25px solid #fff;
            border-bottom-width: 0px;
            background: #f3f3f3;
            position: relative;
            min-height: 1890px;
        }
        main .content .info{
            max-width: 1200px;
            margin: 125px auto 0px;
            padding-bottom: 120px;
        }
        main .content .info .date span{
            position:relative;
            max-width: 270px;
            padding-left: 95px;
            line-height: 1;
            font-size: 12px;
            white-space: nowrap;
            transform: translateX(-50px);
            opacity: 0;
            transition: all .5s ease;
        }
        main .content .info .date.frozen span{
            opacity: 1;
            transform: translateX(-0px);
            transition: transform .5s .5s ease-in, opacity .3s .5s ease, max-width .5s 1s ease-in;
        }
        main .content .info .date span::before{
            content: '';
            position: absolute;
            width: 75px;
            height: 5px;
            background: #1d1e2c;
            left: 0;
            top: calc(50% - 1px);
            transform: translateY(-50%);
        }
        main .content .info .ttl{
            font-size: 38px;
            margin-top: 10px;
        }
        main .content .info .type{
            font-size: 16px;
            margin-bottom: 30px;
        }
        main .content .info .ttl,
        main .content .info .ttl + p{
            font-weight: bold;
            transition: all .5s ease;
            clip-path: polygon(0% 0%, 0% 0%,0% 100%,0% 100%);
        }
        main .content .info .ttl.frozen,
        main .content .info .ttl + p.frozen{
            transition: all 1s .5s ease-out;
            clip-path: polygon(0% 0%, 100% 0%,100% 100%,0% 100%);
        }
        main .content .info .des{
            font-size: 13px;
            min-height: 300px;
            max-width: 460px;
            opacity: 0;
            transition: .5s ease;
        }
        main .content .info .des.frozen{
            opacity: 1;
            transition-delay: .1s;
        }
        main .content .info ul li{
            margin-top: 12px;
            line-height: 1.38;
            opacity: 0;
            transition: all .5s;
            max-width: 200px;
        }
        main .content .info ul.frozen li{
            opacity: 1;
        }
        main .content .info ul.frozen li:nth-child(2){
            transition-delay: .3s;
        }
        main .content .info ul.frozen li:nth-child(3){
            transition-delay: .6s;
        }
        main .content .info ul li:first-child,
        main .content .info ul li .rht p:first-child{
            margin-top: 0px;
        }
        main .content .info ul li .lbl{
            position: relative;
            width: 150px;
            padding-right: 20px;
            text-align: right;
            color: #acadbd;
            font-size: 12px;
        }
        main .content .info ul li .rht{
            width: 240px;
            font-size: 13px;
        }
        main .content .info ul li .rht p{
            margin-top: 12px;
        }
        main .content .info ul li:last-child .rht p{
            position: relative;
        }
        main .content .rhtPic{
            left: 50%;
            z-index: 3;
            max-width: 500px;
            height: 825px;
            top: 270px;
            margin-left: 75px;
            box-shadow: 0 25px 45px rgb(0 0 0 / 25%);
        }
        main .content .rhtPic.frozen{
            max-width: 600px;
        }
        main .content .rhtPic img{
            width: 600px;
        }
        main .content .border{
            border: #897053 solid 5px;
            position: absolute;
            width: 400px;
            height: 815px;
            left: 50%;
            top: 405px;
            margin-left: 150px;
            transition: all 2s 0s cubic-bezier(0, 1, 0.3, 1)
        }
        main .content .border.frozen{
            margin-left: -75px;
            width: 590px;
        }
        main .content .btmPic{
            max-width: 950px;
            height: 690px;
            margin-top: 120px;
            position: absolute;
            z-index: 2;
            top: 1025px;
            left: 50%;
            margin-left: -500px;
        }
        main .content .btmPic.frozen{
            max-width: 1050px;
        }
        main .content .info .no{
            position: absolute;
            top: 1250px;
            left: 50%;
            z-index: 3;
            margin-left: 365px;
            opacity: 1;
            transition: top .1s linear;
            font-size: 150px;
            color: #1d1e2c;
        }

        main .floatPics,
        main .floatPics + .fixedBg{
            min-height: 1050px;
        }
        main .floatPics{
            position: relative;
            background: #1d1e2c;
        }
        main .floatPics .p1{
            left: 50%;
            margin-left: -600px;
            top: -60px;
            z-index: 1;
            max-width: 280px;
            height: 300px;
        }
        main .floatPics .p1.frozen{
            max-width: 380px;
        }
        main .floatPics .p2{
            left: 50%;
            top: 85px;
            margin-left: -50px;
            z-index: 2;
            max-width: 950px;
            height: 680px;
        }
        main .floatPics .p2.frozen{
            max-width: 1050px;
        }
        main .floatPics .p3{
            left: 50%;
            top: 300px;
            margin-left: -600px;
            box-shadow: 0 25px 45px rgb(0 0 0 / 25%);
            z-index: 3;
            max-width: 500px;
            height: 830px;
        }
        main .floatPics .p3 img{
            width: 600px;
        }
        main .floatPics .p3.frozen{
            max-width: 600px;
        }
        main .floatPics .name{
            position: absolute;
            color: #fff;
            opacity: .1;
            font-size: 70px;
            letter-spacing: -1px;
            line-height: 70px;
            top: 850px;
            left: 50%;
            margin: 0;
            margin-left: 65px;
            z-index: 3;
            font-weight: bold;
        }
        
        main .fixedBg{
            background: url(../img/case/7.jpg) no-repeat fixed;
            background-size: cover;
        } 

        main .foot{
            height: 375px;
        }
        main .foot>*{
            transition: background .5s;
            position: relative;
            flex: 1;
            cursor: pointer;
            background: #1d1e2c;
        }
        
        main .foot>*:hover{
            background: #171823;
        }
        main .foot .inner{
            position: absolute;
            color: #acadbd;
            font-size: 12px;
            white-space: nowrap;
        }
        main .foot .toTop{
            width: 450px;
            flex: initial;
            text-align: center;
            border-left: 1px solid #2c2d3e;
            border-right: 1px solid #2c2d3e;
        }
        main .foot .toTop .inner{
            margin-top: 22px;
        }
        main .foot .toTop img{
            width: 140px;
            display: block;
            margin-bottom: 35px;
        }
        main .foot .prev .inner{
            right: 150px;
            text-align: right;
        }
        main .foot .next .inner{
            left: 150px;
        }
        main .foot .inner .name{
            font-size: 18px;
            font-weight: bold;
            color: #fff;
        }
        main .foot .inner i{
            background: #897053;
            width: 35px;
            height: 1px;
            transition: .5s;
            margin: 45px 0px;
        }
        main .foot>*:hover .inner i{
            width: 75px;
        }
        
        main .palace{
            height: 100vh;
            position: fixed;
            z-index: 300;
            pointer-events: none;
            opacity: 0; 
            transition: cubic-bezier(0.45, 0.22, 0.82, 0.4) .3s;
        }
        main .palace .bg{
            z-index: -1;
            background: #1d1e2c;
            opacity: .95;
        }

        main .palace.active{
            opacity: 1;
            pointer-events: all;
        }
        main .palace>*{
            z-index: 2;
        }
        
        main .palace .close{
            position: absolute;
            top: 30px;
            right: 30px;
            width: 46px;
            height: 46px;
            border: 2px solid #897053;
            border-radius: 50%;
            cursor: pointer;
        }
        main .palace .close:before,
        main .palace .close:after{
            content: '';
            width: 17px;
            height: 1px;
            background: #897053;
            position: absolute;
            top: 50%;
            left: calc(50% - 17px / 2);
            transition: background .4s .1s;
        }
        main .palace .close:before{
            transform: rotate(45deg);
        }
        main .palace .close:hover:before,
        main .palace .close:hover:after{
            background: #fff;
        }
        main .palace .close:after{
            transform: rotate(-45deg);
        }
        main .palace .close>*{
            position: absolute;
            top: -2px;
            height: calc(100% + 4px);
            width: calc(50% + 2px);
        }
        main .palace .close>*{
            overflow: hidden;
            pointer-events: none;
        }
        main .palace .close span{
            width: 200%;
            height: 100%;
            position: absolute;
            top: 0px;
        }
        main .palace .close .lft{
            left: -2px;
        }
        main .palace .close .rht{
            right: -2px;
        }
        main .palace .close span{
            border: 2px solid #fff;
            border-radius: 50%;
            transition: transform .3s.3s linear;
            transform: rotate(0deg);
        }
        main .palace .close .lft span{
            left: 0px;
            transition-delay: 0s;
            clip-path: polygon(50% 0%,100% 0%,100% 100%,50% 100%);
        }
        main .palace .close:hover .lft span{
            transition-delay: .3s;
        }
        
        main .palace .close .rht span{
            right: 0px;
            clip-path: polygon(0% 0%,50% 0%,50% 100%,0% 100%);   
        }
        main .palace .close:hover .rht span{
            transition-delay: 0s;
        }
        main .palace .close:hover span{
            transform: rotate(180deg);
        }
        
        main .palace .control{
            width: 100%;
            height: 150px;
            justify-content: space-between;
        }
        main .palace .control.hidden{
            display: none;
        }
        main .palace .control>*.hidden{
            opacity: 0;
            pointer-events: none;
        }
        main .palace .control p{
            position: relative;
            width: 75px;
            cursor: pointer;
            background: #fff;
            transition: background .3s;
        }
        main .palace .control p:hover{
            background: #897053;
        }
        main .palace .control p img{
            width: 11px;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            transition-duration: .3s;
        }
        main .palace .control .prev img{
            transform: translate(-50%,-50%) rotateY(180deg);
        }
        main .palace .swp{
            z-index: 1;
            width: 83%;
            height: 87%;
            top: 50px;
        }
        main .palace .swp *{
            border-radius: 3px;
        }
        main .palace .swp img{
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            opacity: 0;
            z-index: 2;
        }
        main .palace .swp img.active{
            opacity: 1;
            transition: cubic-bezier(0.45, 0.22, 0.82, 0.4) .3s opacity;
        }
        main .palace .swp .white{
            background: #fff;
            opacity: 0;
            width: 0px;
            height: 0px;
        }
        main .palace .swp .white.active{
            opacity: 1;
        }
        
       

        @media(max-width:1600px){
            main .banner.disappear .inner{
                height: 350px;
            }
            main .banner .ttls .box{
                height: 165px;
            }
            main .banner .ttls .box .no{
                font-size: 160px;
            }
            main .banner .ttls .box .desc{
                font-size: 55px;
                letter-spacing: 10px;
            }

            main .content{
                min-height: 1400px;
            }
            main .content .info{
                padding-bottom: 70px;
                width: 920px;
            }
            main .content .info .des{
                min-height: 200px;
                max-width: 345px;
            }
            main .content .rhtPic.frozen{
                max-width: 435px;
            }
            main .content .rhtPic{
                height: 600px;
            }
            main .content .border.frozen{
                width: 440px;
                margin-top: -25px;
                top: 300px;
                height: 615px;
            }
            main .content .btmPic{
                top: 770px;
                margin-left: -360px;
                max-width: 690px;
            }
            main .content .btmPic.frozen{
                max-width: 790px;
                margin-left: -460px;
            }
            main .content .btmPic{
                height: 520px;
            }
            main .content .info .no{
                top: 1020px;
                margin-left: 265px;
                font-size: 115px;
            }
            main .floatPics .p1{
                max-width: 210px;
            }
            main .floatPics .p1.frozen{
                max-width: 285px;
            }
            main .floatPics .p1{
                height: 230px;
            }
            main .floatPics .p2.frozen{
                max-width: 800px;
            }
            main .floatPics .p2{
                height: 520px;
                max-width: 700px;
                margin-left: -90px;
            }
            main .floatPics .p3.frozen{
                max-width: 450px;
                margin-left: -460px;
            }
            main .floatPics .p3{
                height: 625px;
                max-width: 350px;
            }
            main .floatPics, main .floatPics + .fixedBg{
                min-height: 900px;
            }
            main .floatPics .name{
                top: 680px;
            }

            main .foot{
                height: 340px;
            }
            main .foot .toTop{
                width: 340px;
            }
            main .foot .inner .name{
                font-size: 14px;
            }
            main .foot .prev .inner{
                right: 100px;
            }
            main .foot .next .inner{
                left: 100px;
            }
            main .foot .inner i{
                margin: 30px 0px;
            }
            main .foot .toTop img{
                margin-bottom: 24px;
            }
        }

        @media(max-width:1365px){
            main .banner.disappear .inner{
                height: 250px;
            }
            main .banner .ttls .box .desc{
                font-size: 38px;
                letter-spacing: 5px;
            }
            main .banner .ttls .box>span{
                bottom: -35px;
                font-size: 12px;
            }
        }

        @media(max-width:1024px){
            main .banner.disappear .inner{
                width: 72%;
                height: 450px;
                padding: 0px 12px;
            }
            main .banner .ttls .box{
                height: 140px;
                left: 0;
            }
            main .banner .ttls .box::before{
                top: 55px;
                height: 3px;
            }
            main .banner .ttls .box.active::before{
                width: 45px;
            }
            main .banner .ttls .box .desc{
                top: 75px;
            }
            main .banner .ttls .box .desc p{
                line-height: 38px;
            }
            main .banner .ttls .box .no{
                font-size: 115px;
            }

            main .content .info{
                max-width: 700px;
            }
            main .content .info .des{
                max-width: 480px;
                min-height: initial;
                margin-bottom: 45px;
            }
            main .content .info ul li{
                max-width: 345px;
            }
            main .content .rhtPic{
                top: 0px;
                left: 0px;
                position: relative;
                margin: 20px 0 0 420px;
                max-width: 320px !important;
                height: 480px;
            }
            main .content .btmPic{
                margin: -100px 0 0 0 !important;
                top: 0px;
                left: 0px;
                position: relative;
                max-width: 560px !important;
            }
            main .content .border{
                width: 320px !important;
                height: 430px !important;
                position: initial;
                margin: -375px 0px 0px 340px !important;
            }
            main .content .info .no{
                display: none;
            }

            main .floatPics{
                min-height: 680px;
            }
            
            main .floatPics + .fixedBg{
                min-height: 460px;
                background-attachment: initial;
                background-position: center center;
            }
            main .floatPics .fltImg{
                position: relative !important;
                transform: none !important;
                top: initial !important;
                left: initial !important;
                display: block;
            }
            main .floatPics .p1{
                height: 135px;
                margin: 0 0 0 10px !important;
                max-width: 170px !important;
                transform: translateY(-30px) !important;
            }
            main .floatPics .p2{
                margin: -50px 0 0 260px !important;
                max-width: 475px !important;
                height: 310px;
            }
            main .floatPics .p3{
                margin: -215px 0 0 10px !important;
                max-width: 275px !important;
                height: 375px;
            }
            main .floatPics .name{
                top: initial;
                margin-left: 0;
                bottom: 35px;
            }

            main .foot{
                height: 260px;
            }
            main .foot .prev .inner{
                right: 45px;
            }
            main .foot .next .inner{
                left: 45px;
            }
            main .foot .toTop{
                width: 260px;
            }
        }

        @media(max-width:767px){
            footer{
                line-height: 1.5;
            }

            main{
                padding-bottom: 38px;
            }
            main .banner{
                padding-top: 60px;
                padding-bottom: 38px;
            }
            main .banner.frozen .ttls::before{
                opacity: 0;
            }
            main .banner.disappear .inner{
                width: calc(90% - 50px * .9);
                height: 250px;
            }
            main .banner .ttls .box{
                width: 290px;
                height: 60px;
                margin-left: -30px;
                left: 50%;
                transform: translate(-50%,-50%);
            }
            main .banner .ttls .box::before{
                top: 20px;
                height: 2px;
            }
            main .banner .ttls .box::before,
            main .banner .ttls .box>span,
            main .banner .ttls .box .desc{
                left: 140px;
            }
            main .banner .ttls .box .no{
                font-size: 48px;
            }
            main .banner .ttls .box .no p{
                width: 125px;
            }
            
            main .banner .ttls .box .desc{
                font-size: 20px;
                letter-spacing: 2px;
                top: 30px;
            }
            main .banner .ttls .box .desc p{
                line-height: 24px;
            }

            main .content .info{
                margin-top: 50px;
                padding: 0px 25px;
            }
            main .content .rhtPic,
            main .content .btmPic{
                max-width: 100% !important;
                margin: 25px !important;
                transform: initial !important;
            }
            main .content .border{
                display: none;
            }

            main .floatPics{
                padding: 50px 0px;
            }
            main .floatPics .fltImg{
                margin: 25px !important;
                transform: none !important;
            }
            main .floatPics .p1{
                height: 222px;
                max-width: 280px !important;
            }
            main .floatPics .p2{
                max-width: 380px !important;
                height: 253px;
                margin-top: -90px !important;
                z-index: 0;
                margin-left: 90px !important;
            }
            main .floatPics .p3{
                height: 405px;
                max-width: 270px !important;
                margin-top: -90px !important
            }
            main .floatPics .name{
                top: initial;
                margin-left: 0;
                bottom: 35px;
            }

            main .foot{
                position: relative;
                padding-bottom: 175px;
                height: initial;
            }
            main .foot>*{
                height: 175px;
            }
            main .foot .toTop{
                position: absolute;
                bottom: 0px;
                border-width: 0px;
                border-top: 1px solid #2c2d3e;
                left: 0px;
                width: 100%;
            }
            main .foot .toTop::after{
                content: '';
                position: absolute;
                width: 1px;
                height: 100%;
                bottom: 100%;
                z-index: 2;
                left: 50%;
                background: #2c2d3e;
            }
        }

        @media(max-width:480px){
            footer p{
                display: block;
                margin-left: 0px !important;
            }

            main{
                padding-bottom: 74px;
            }
            main .banner{
                padding-bottom: 56px;
            }
        }